<template>
    <div class="flex align-start column box-border" :style="{ 'background-color': bgColor }" @click="cardClick">
        <div class="box-tri box-tri1"></div>
        <div class="box-tri box-tri2"></div>
        <div class="box-tri box-tri3"></div>
        <div class="box-tri box-tri4"></div>

        <div class="q-mb-md title" v-if="$slots.title">
            <slot name="title"> Title </slot>
        </div>

        <div class="full-width flex align-start justify-center text" v-if="noData">
            <slot name="text"> {{ noDataText }} </slot>
        </div>

        <div class="full-width" style="flex: 1" v-else>
            <slot name="default"> </slot>
        </div>
    </div>
</template>

<script>
export default {
    props: {
        noData: {
            type: Boolean,
            default: () => {
                return false
            },
        },
        noDataText: {
            type: String,
            default: () => {
                return '暂无数据'
            },
        },
        shop_id: {
            type: [String, Number],
            default: '17',
        },
    },
    computed: {
        bgColor() {
            return this.shop_id == 18 ? '#fff' : '#202049'
        }
    },
    methods: {
        cardClick() {
            this.$emit('click')
        }
    }
}
</script>

<style lang="scss" scoped>
.border-light {
    border-radius: 5px;
    border: 2px solid rgba(26, 63, 129, 1);

    background: linear-gradient(#00faff, #00faff) left top, linear-gradient(#00faff, #00faff) left top, linear-gradient(#00faff, #00faff) right top, linear-gradient(#00faff, #00faff) right top,
        linear-gradient(#00faff, #00faff) left bottom, linear-gradient(#00faff, #00faff) left bottom, linear-gradient(#00faff, #00faff) right bottom, linear-gradient(#00faff, #00faff) right bottom;
    background-repeat: no-repeat;
    background-size: 2px 10px, 10px 2px;
}

.box-border {
    position: relative;
    // border: 2px solid rgba(26, 63, 129, 1);
    // box-shadow: 0px 0px 14px 10px #052058 inset;
    // background: rgb(21, 52, 120);
    background: #202049;
    border-radius: 16px;
    // .box-tri {
    //   position: absolute;
    //   width: 20px;
    //   height: 20px;
    //   background: url('../assets/img/jiao.png') no-repeat center;
    //   &.box-tri1 {
    //     top: -3px;
    //     left: -3px;
    //   }
    //   &.box-tri2 {
    //     top: -3px;
    //     right: -3px;
    //     transform: rotate(90deg);
    //   }
    //   &.box-tri3 {
    //     bottom: -3px;
    //     left: -3px;
    //     transform: rotate(-90deg);
    //   }
    //   &.box-tri4 {
    //     bottom: -3px;
    //     right: -3px;
    //     transform: rotate(-180deg);
    //   }
    // }
}

.title,
.text {
    color: rgba(1, 217, 254, 1);
}
.title:before {
    content: '';
    display: inline-block;
    position: relative;
    top: 2px;
    margin-right: 10px;
    background: rgba(48, 153, 166, 1);
    width: 2px;
    height: 14px;
    border: 2px solid rgba(108, 206, 230, 1);
}
</style>
